<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>签到表单</title>
<link rel="icon" href="/static/favicon.png" >
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app" class="app" >
    <el-tabs type="border-card" v-model="activeTab" >
      <el-tab-pane name="查询学生信息" >
        <span slot="label"><i class="el-icon-date" ></i> 查询学生信息</span>
      <el-radio-group v-model="radio3" size="small">
        <el-radio-button label="学号"></el-radio-button>
        <el-radio-button label="姓名"  ></el-radio-button>
        <el-radio-button label="班级"></el-radio-button>
        <el-radio-button label="性别"></el-radio-button>
        <el-radio-button label="查询所有"></el-radio-button>
        <el-row>
          <el-input
          @keyup.enter.native="Find"
    placeholder="请输入查询的内容"
    :disabled="radio3==='查询所有'"
    prefix-icon="el-icon-search"
    v-model="input2"
    clearable
    style="width: 400px;"
    >
  </el-input>
  <el-button icon="el-icon-search"
   circle
   type="primary"
  :disabled="input2.length==0&&radio3!='查询所有'"
  @click="Find">
  </el-button>
        </el-row>
  
       
        
      </el-tab-pane>


      <el-tab-pane name="添加学生信息" >
        <span slot="label" ><i class="el-icon-s-custom" ></i> 添加学生信息</span>

        <el-form  :model="sizeForm" status-icon  :rules="rules" ref="ruleForm" label-width="80px" size="mini" class="demo-ruleForm">
          <el-form-item label="学号" prop="number">
            <el-input v-model="sizeForm.number" clearable maxlength="6" show-word-limit style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="sizeForm.name" clearable  style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="sizeForm.sex">
              <el-radio :label="'男'">男</el-radio>
              <el-radio :label="'女'">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="班级" prop="class">
            <el-cascader
              v-model="sizeForm.class"
              :options="options"
              ></el-cascader>
          </el-form-item>

          <el-form-item size="large">
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="activeTab='查询学生信息'">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>


    <template >
      <el-table
        :data="tableData"
        style="width: 100%"
        v-if="activeTab=='查询学生信息'">
        <el-table-column
         
          prop="number"
          label="学号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="class"
          label="班级"
          width="150">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button @click="dialogFormVisible = true;Update(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="Delete(scope.row)" type="text"  size="small" style="color: red;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>




    <el-dialog title="修改学生信息" :visible.sync="dialogFormVisible" center>
      <el-form ref="form" :model="UpdateForm" label-width="80px" size="mini">
        <el-form-item label="学号">
          <el-input v-model="UpdateForm.number" clearable maxlength="6" show-word-limit style="width: 130px;" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="UpdateForm.name" clearable  style="width: 130px;"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="UpdateForm.sex">
            <el-radio :label="'男'">男</el-radio>
            <el-radio :label="'女'">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="班级">
          <el-cascader
            v-model="UpdateValue"
            :options="options"
            ></el-cascader>
        </el-form-item>




        <el-form-item size="large">
          <el-button type="primary" @click="open3">立即修改</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    
    var myvue=new Vue({
      el: '#app',
      data: function() {
        return {
          rules: {
          number: [
            { required: true, message: '请输入学号', trigger: 'blur' },
            { min: 6, max: 6, message: '长度在  6 位', trigger: 'blur' },
            { validator: this.validateActivityNumber, trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 4, message: '姓名长度不得低于2 位，最高4 位', trigger: 'blur' },
            { validator: this.validateActivityName, trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'change' },
          ],
          class: [
            { type: 'array',required: true, message: '请选择班级', trigger: 'change' },
          ],
        },
          activeTab:'查询学生信息',
           visible: false,
           checked: true,
           radio3: '查询所有',
           input2:'',
           tableData: [],
        sizeForm: {
          number:'',
          name:'',
          class:[],
          sex:''
        },
        UpdateForm: {
          number:'',
          name:'',
          class:[],
          sex:''
        },
        radio:'',
        dialogFormVisible:false,
        value: '',
        UpdateValue:[],
        options: [{
          value: '云计算',
          label: '云计算',
          children: [{
            value: '一班',
            label: '一班',
            
          }, {
            value: '二班',
            label: '二班',
          
          },{
            value: '三班',
            label: '三班',
          }]
          
        },{
          value: '互联网',
          label: '互联网',
          children: [{
            value: '一班',
            label: '一班',
            
          }, {
            value: '二班',
            label: '二班',
          
          },{
            value: '三班',
            label: '三班',
          }]
        }]
      }
      },
      methods:{
        //汉字
        validateActivityName(rule, value, callback) {
    const regex = /^[\u4e00-\u9fa5]+$/;; // 正则表达式匹配中文和英文字符
    if (!regex.test(value)) {
      callback(new Error('姓名只能是汉字，请重新输入！'));
    } else {
      callback();
    }
  },
        //数字
        validateActivityNumber(rule, value, callback) {
    const regex = /^[0-9]+$/; // 正则表达式匹配中文和英文字符
    if (!regex.test(value)) {
      callback(new Error('学号只能是数字，请重新输入！'));
    } else {
      callback();
    }
  },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //信息没有问题
            this.value=this.sizeForm.class[0]+this.sizeForm.class[1]

           
        axios.post('/api/useradd',{
          number: this.sizeForm.number,
          name: this.sizeForm.name,
          sex: this.sizeForm.sex,
          class: this.value, 
        })
        .then(response => {
             // 请求成功时的处理
             this.$message({
          message: '添加成功！',
          type: 'success'
        });
        this.sizeForm.number=''
        this.sizeForm.name=''
        this.sizeForm.sex=''
        this.sizeForm.class=[]
        this.value=''
          })
          .catch(error => {
            this.$message.error(error);
          })





          } else {
            //信息有误提示
            this.$notify.error({
          title: '错误',
          message: '请填写正确的信息！'
        });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    





        handleChange(value) {
        console.log(value);
      },
      open3() {        
        this.UpdateForm.class=this.UpdateValue[0]+this.UpdateValue[1]
        //console.log(this.sizeForm);
        let url='/api/revise?number='+this.UpdateForm.number
        console.log(url);
        axios.post(url,{
          
          number: this.UpdateForm.number,
          name: this.UpdateForm.name,
          sex: this.UpdateForm.sex,
          class: this.UpdateForm.class, 
        })
        .then(response => {
             // 请求成功时的处理
             this.$message({
          message: '添加成功！',
          type: 'success'
        });
        this.UpdateForm.number=''
        this.UpdateForm.name=''
        this.UpdateForm.sex=''
        this.UpdateForm.class=''
        this.value=''
        this.dialogFormVisible=false
          })
          .catch(error => {
            this.$message.error(error);
          })
        
      },
      Find(){
      if (this.radio3=='查询所有') {
        axios.get('/api/find',{
          params:{
            id:'5'
          },
        })
        .then(function (response) {
             // 请求成功时的处理
             myvue.tableData=[]
    const users = response.data; // 假设返回的是用户数组
    myvue.tableData.push(...users)
          })
          .catch(function (error) {
            this.$message.error(error);
          })


      }else{
          axios.get('/api/find',{
            params:{
              id:this.radio3,
              data:this.input2
            },
            withCredentials: true
          })
          .then(function (response) {
             // 请求成功时的处理
             myvue.tableData=[]
    const users = response.data; // 假设返回的是用户数组
    myvue.tableData.push(...users)
          })
          .catch(function (error) {
            this.$message.error(error);
          })

      }


      },
      Update(data) {
        this.UpdateValue=[]
       // console.log(data);
        this.UpdateForm.number=data.number
        this.UpdateForm.name=data.name
        this.UpdateForm.sex=data.sex
        this.UpdateForm.class=data.class
        let length =data.class.length
        this.UpdateValue.push(data.class.substring(0,length-2))
        this.UpdateValue.push(data.class.substring(length-2))
        //console.log(this.value);






        
      },
      Delete(data){
        let elementToRemove = data.ID; // 要删除的元素

this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning',
  center: true
}).then(() => {
 axios.get('/api/delete',{
  params:{
    //tyep:'1'
    Data:data.ID
  }
 })
 .then(response =>{
  let index = this.tableData.filter(item => item.ID !== elementToRemove);
    //console.log(index);
    this.tableData=index
  this.$message({
    type: 'success',
    message: '删除成功!'
  })
 })
 .catch(error =>{
  this.$message.error(error)
 })

}).catch(() => {
  this.$message({
    type: 'info',
    message: '已取消删除'
  });
});
      }
      }
    })
    window.addEventListener('load', function() {
   // 发起 GET 请求
axios.get('/api/find',{
  params:{
    id:'5'
  },
  withCredentials: true
})
  .then(function (response) {
    // 请求成功时的处理
    const users = response.data; // 假设返回的是用户数组
    myvue.tableData.push(...users)
  })
  .catch(function (error) {
    // 请求失败时的处理
    console.error(error);
    this.$message.error(error);

  });
});
  </script>
</html>